<template>
  <div class="p-6">
    <!-- 搜索 & 筛选 -->
    <a-space class="mb-4">
      <a-input v-model:value="filters.keyword" placeholder="搜索资源名称/路径" style="width: 250px" />
      <a-select v-model:value="filters.type" placeholder="资源类型" style="width: 150px" allow-clear>
        <a-select-option v-for="type in types" :key="type" :value="type">{{ type }}</a-select-option>
      </a-select>
      <a-select v-model:value="filters.status" placeholder="状态" style="width: 120px" allow-clear>
        <a-select-option value="active">启用</a-select-option>
        <a-select-option value="disabled">禁用</a-select-option>
      </a-select>
      <a-button type="primary" @click="fetchResources">搜索</a-button>
    </a-space>

    <!-- 批量操作 -->
    <a-space class="mb-2">
      <a-button type="primary" @click="batchEnable" :disabled="!selectedRows.length">批量启用</a-button>
      <a-button type="default" @click="batchDisable" :disabled="!selectedRows.length">批量禁用</a-button>
      <a-button type="dashed" danger @click="batchDelete" :disabled="!selectedRows.length">批量删除</a-button>
    </a-space>

    <!-- 资源表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredResources"
      :row-selection="rowSelection"
      row-key="id"
      bordered
      :scroll="{ x: 1000 }"
      @row-click="openDetails"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 'active' ? 'green' : 'red'">
            {{ record.status === 'active' ? '启用' : '禁用' }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click.stop="toggleStatus(record)">
              {{ record.status === 'active' ? '禁用' : '启用' }}
            </a-button>
            <a-button type="link" danger @click.stop="deleteResource(record)">删除</a-button>
            <a-button type="link" @click.stop="editResource(record)">编辑</a-button>
          </a-space>
        </template>
        <template v-else>
          {{ record[column.dataIndex] }}
        </template>
      </template>
    </a-table>

    <!-- 详情侧边栏 -->
    <a-drawer
      title="资源详情"
      :visible="showDetails"
      :width="400"
      placement="right"
      @close="showDetails = false"
    >
      <div v-if="selectedResource">
        <p><strong>名称：</strong>{{ selectedResource.name }}</p>
        <p><strong>类型：</strong>{{ selectedResource.type }}</p>
        <p><strong>路径/地址：</strong>{{ selectedResource.path }}</p>
        <p><strong>状态：</strong>
          <a-tag :color="selectedResource.status === 'active' ? 'green' : 'red'">
            {{ selectedResource.status === 'active' ? '启用' : '禁用' }}
          </a-tag>
        </p>
        <p><strong>分组：</strong>{{ selectedResource.group }}</p>
        <p><strong>创建时间：</strong>{{ selectedResource.createdAt }}</p>
        <p><strong>更新人：</strong>{{ selectedResource.updatedBy }}</p>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const resources = ref([
  { id: 1, name: '用户头像', type: '图片', path: '/uploads/avatar', status: 'active', group: '用户资源', createdAt: '2024-01-01', updatedBy: 'Admin' },
  { id: 2, name: '产品文档', type: '文档', path: '/files/product.pdf', status: 'disabled', group: '产品资源', createdAt: '2024-02-10', updatedBy: 'Admin' },
  { id: 3, name: '日志文件', type: '日志', path: '/logs/system.log', status: 'active', group: '系统资源', createdAt: '2024-03-05', updatedBy: 'System' },
])

const filters = ref({ keyword: '', type: '', status: '' })
const types = ['图片', '文档', '日志', '视频', '其他']

const selectedRows = ref([])
const showDetails = ref(false)
const selectedResource = ref(null)

const columns = [
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '路径/地址', dataIndex: 'path', key: 'path' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '分组', dataIndex: 'group', key: 'group' },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
  { title: '操作', key: 'action' },
]

const filteredResources = computed(() => {
  return resources.value.filter(r => {
    const matchKeyword = !filters.value.keyword || r.name.includes(filters.value.keyword) || r.path.includes(filters.value.keyword)
    const matchType = !filters.value.type || r.type === filters.value.type
    const matchStatus = !filters.value.status || r.status === filters.value.status
    return matchKeyword && matchType && matchStatus
  })
})

const rowSelection = {
  selectedRowKeys: selectedRows.value,
  onChange: keys => selectedRows.value = keys
}

function fetchResources() {
  console.log('搜索条件：', filters.value)
}

function openDetails(record) {
  selectedResource.value = record
  showDetails.value = true
}

function toggleStatus(record) {
  record.status = record.status === 'active' ? 'disabled' : 'active'
}

function deleteResource(record) {
  resources.value = resources.value.filter(r => r.id !== record.id)
}

function editResource(record) {
  console.log('编辑资源', record)
}

function batchEnable() {
  resources.value.forEach(r => {
    if (selectedRows.value.includes(r.id)) r.status = 'active'
  })
}

function batchDisable() {
  resources.value.forEach(r => {
    if (selectedRows.value.includes(r.id)) r.status = 'disabled'
  })
}

function batchDelete() {
  resources.value = resources.value.filter(r => !selectedRows.value.includes(r.id))
  selectedRows.value = []
}
</script>
